<template>
  <div class="list" ref="wrapers">
    <div class="box">
        <div class="wraper">
            <div class="title border-topbottom">
            您的位置
            </div>
            <div class="area">
                <ul>
                    <li class="city-name">{{ this.$store.state.city }}</li>
                </ul>
            </div>
        </div>
        <div class="wraper">
            <div class="title border-topbottom">
            热门城市
            </div>
            <div class="area">
                <ul>
                    <li class="city-name" @click="handleChangeCity(item.name)" v-for="item of hotCities" :key="item.id">{{ item.name }}</li>
                </ul>
            </div>
        </div>
        <div class="wraper"  v-for="(item, key) of citys" :key="key" :ref="key">
            <div class="title border-topbottom">
                {{ key }}
            </div>
            <div class="char-cont" @click="handleChangeCity(itemInner.name)" v-for="(itemInner, index) of item" :key="index">
                <div class="border-bottom">
                    <div class="char-city">{{ itemInner.name }}</div>
                </div>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
  name: 'CityList',
  props: {
    citys: Object,
    hotCities: Array,
    char: String
  },
  watch: {
    char () {
      if (this.char) {
        const elem = this.$refs[this.char][0]
        this.scroll.scrollToElement(elem)
      }
    }
  },
  methods: {
    handleChangeCity (city) {
      this.$store.commit('changeCity', city)
      this.$router.push('/')
    }
  },
  mounted () {
    this.scroll = new Bscroll(this.$refs.wrapers)
  }
}
</script>

<style lang="stylus" scoped>
    .border-topbottom
        &::before
            border-color #777
        &::after
            border-color #777
    .border-bottom
        &::before
            border-color #777
        &::after
            border-color #777
    .list
        overflow hidden
        position absolute
        top 1.58rem
        left 0
        right 0
        bottom 0
        .title
            padding .14rem .25rem
            background #eee
            font-size .2rem
        .area
            overflow hidden
            background #fff
            padding .2rem .4rem 0 .25rem
            .city-name
                border 1px solid #ccc
                padding .1rem 0
                width 2rem
                text-align center
                border-radius .1rem
                float left
                margin-right .2rem
                margin-bottom .2rem
        .char-city
            padding .2rem .4rem .2rem .25rem
</style>
